<template>
  <div class='forget'>
        <div class='forgetcontent'>
    <div class='forgetson'>
      <div class="line1"></div>
      <div class="line2"></div>
      <ul>
        <li v-for='(item,index) in list' :key='index'>
          <!-- <span></span> -->
          <span :class='[item.flag?(indexs>index || indexs==2?"circle activee":"circle active"):"circle"]'></span>
          <span>{{item.title}}</span>
        </li>
      </ul>
    </div>
    <!-- 填写用户信息 -->
    <div class="inputStyle" v-show="indexs==0">
      <div class="userInfomation">
        <div class="PhoneStyle1">
          <input class="phoneInput1" type="text" placeholder="请输入您的手机号码" v-model="phone">
        </div>
        <div class="PhoneStyle2">
          <input class="phoneInput2" type="text" placeholder="输入验证码" v-model='yzm'>
          <button class="yzmStyle" @click='getyzm'>{{verification?time+"s后再次发送":'获取验证码'}}</button>
        </div>
        <div class="PhoneStyle3">
          <button class="nextStyle" @click="next(1)">下一步</button>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <div class="inputStyle" v-show="indexs==1">
      <div class="userInfomation">
        <div class="PhoneStyle1">
          <input class="phoneInput1" type="password" placeholder="请输入新密码" v-model="password">
        </div>
        <div class="PhoneStyle2">
          <input class="phoneInput4" type="password" placeholder="请再次输入新密码确认" v-model="passwordsure">
        </div>
        <div class="PhoneStyle3">
          <button class="nextStyle" @click="next(2)">下一步</button>
        </div>
      </div>
    </div>
    <!-- 完成 -->
    <div class="inputStyle" v-show="indexs==2">
      <img src="../../static/image/complete.png" alt="" style='margin: 0 auto'>
    </div>
  </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      list: [
        { title: "步骤1-填写用户信息", flag: true },
        { title: "步骤2-修改密码", flag: false },
        { title: "步骤3-完成", flag: false }
      ],
      indexs: 0,
      phone: "",
      yzm: "",
      yzmcode: null,
      password: "",
      passwordsure: "",
      verification: false,
      time: 60
    };
  },
  methods: {
    getyzm() {
      var that = this;
      if (this.verification) return;
      this.verification = true;
      var timer = setInterval(() => {
        that.time--;
        if (that.time == 0) {
          that.verification = false;
          that.time = 60;
          clearInterval(timer);
        }
      }, 1000);
      let pattern = /^1[34578]\d{9}$/;
      if (this.phone === "") {
        // alert("请填写账号");
        Message({
          message: "请填写账号",
          type: "error"
        });
      } else if (!pattern.test(this.phone)) {
        // alert("手机号不正确");
        Message({
          message: "手机号不正确",
          type: "error"
        });
      } else {
        u.verifyCode(
          {
            username: this.phone,
            type: "forgetPassWord"
          },
          data => {
            if (data && data.length && data[0].checkCode) {
              this.yzmcode = data[0].checkCode;
            }
          }
        );
      }
    },
    next(index) {
      if (index == 1) {
        if (this.yzm == this.yzmcode) {
          this.indexs = index;
          this.list[this.indexs].flag = true;
        } else {
          Message({
            message: "请填写正确的验证码及手机号",
            type: "error"
          });
        }
      } else if (index == 2) {
        let pattern2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
        if (this.password === "" || this.passwordsure === "") {
          // alert("请填写密码");
          Message({
            message: "请填写密码",
            type: "error"
          });
        } else if (this.password !== this.passwordsure) {
          // alert("两次密码不一致");
          Message({
            message: "两次密码不一致",
            type: "error"
          });
        } else if (!pattern2.test(this.passwordsure)) {
          // alert("密码格式不正确");
          Message({
            message: "密码格式不正确",
            type: "error"
          });
        } else {
          u.forget(
            {
              username: this.phone,
              password: this.passwordsure
            },
            data => {
              this.indexs = index;
              this.list[this.indexs].flag = true;
              setTimeout(() => {
                this.$router.push({ path: "/login" });
              }, 1000);
            }
          );
        }
      }
    }
  }
};
</script>
<style lang='less' scoped >
[v-cloak] {
  display: none;
}
body,
html {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}
button {
  outline: none;
  cursor: pointer;
}
input {
  outline: none;
  padding-left: 30px;
  &:focus {
    border: 0;
  }
}
.forget {
  padding-top: 349px;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  background: url("../../static/image/bg.png") no-repeat;
  text-align: center;
  box-sizing: border-box;
   background-size: 100% 100%;
>.forgetcontent{
    background-color: white;
    display: inline-block;
    padding: 40px;
    > .forgetson {
    position: relative;
    // border: 1px solid #000;
    width: 640px;
    margin: 0 auto;
    > ul {
      display: flex;
      justify-content: space-between;
      width: 100%;
      //   margin-left: 20%;
      > li {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        span {
          background-repeat: no-repeat;
          background-position: center center;
        }
        > .active {
          background-image: url("../../static/image/yellow.png");
        }
        > .activee {
          background-image: url("../../static/image/yes.png");
          background-position: -4px -1px;
        }
        .circle {
          color: red;
          display: inline-block;
          border: 2px solid #e8e8e8;
          width: 30px;
          border-radius: 50%;
          height: 30px;
          border-radius: 50%;
          margin-bottom: 5px;
        }
      }
    }
    .line1 {
      border-bottom: 1px solid #e8e8e8;
      position: absolute;
      width: 245px;
      left: 12%;
      top: 26%;
    }
    .line2 {
      border-bottom: 1px solid #e8e8e8;
      position: absolute;
      width: 230px;
      left: 57%;
      top: 26%;
    }
  }
  > .inputStyle {
    // border: 1px solid #000;
    width: 640px;
    margin: 11% auto;
    text-align: center;
    // padding-left: 30px;
    .userInfomation {
      .PhoneStyle1 {
        margin-bottom: 24px;
        .phoneInput1 {
          border: 1px solid #ded8c5;
          width: 100%;
          border-radius: 4px;
          height: 58px;
        }
      }
      .PhoneStyle2 {
        margin-bottom: 43px;
        display: flex;
        justify-content: space-between;
        .phoneInput2 {
          border: 1px solid #ded8c5;
          width: 490px;
          border-radius: 4px;
          height: 58px;
        }
        .phoneInput4 {
          border: 1px solid #ded8c5;
          width: 100%;
          border-radius: 4px;
          height: 58px;
        }
        .yzmStyle {
          background-color: #ffb001;
          border: none;
          width: 130px;
          border-radius: 4px;
          color: white;
        }
      }
      .PhoneStyle3 {
        .nextStyle {
          background-color: #ffb001;
          border: 1px solid #ded8c5;
          width: 100%;
          border-radius: 4px;
          height: 58px;
          color: white;
        }
      }
    }
  }
}
}

::placeholder {
  padding-left: 26px;
}
</style>
